<script setup lang="ts">
import {User} from '@element-plus/icons-vue'
import Visitor from "@/components/visitor/Visitor.vue";
import {reqDocorInfo, reqGetAllUser} from '@/api/hospital/index.ts'
import {onMounted, ref} from "vue";
import type {UserResponseData,UserArr,DoctorInfoData} from '@/api/hospital/type.ts'
import type {VisitorInfo,AddVisitorInfoResData,SubmitOrder} from '@/api/user/type.ts'
import  {reqAddVisitorInfo,reqSubmitOrder} from '@/api/user/user.ts'
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
onMounted(()=>{
  //获取所有的就诊人信息
  getAllUser()
  //获取就诊人医生的信息
  getVisitorOfDoctor()
})
const $route = useRoute()
//存储就诊人相关医生的信息
let visitorOfDocInfo = ref<any>({})
/**
 * 获取就诊人相关医生的信息
 */
async function getVisitorOfDoctor(){
  let res:DoctorInfoData = await reqDocorInfo($route.query.id as string)
  // console.log(res)
  if(res.code==200){
    visitorOfDocInfo.value=res.data
  }
}
//存储就诊人信息的数组
let visitorInfoArr = ref<UserArr>([])
/**
 * 获取所有就诊人信息
 */
async function getAllUser(){
  let res:UserResponseData = await reqGetAllUser()
  if(res.code==200){
    visitorInfoArr.value=res.data
  }
  // console.log(res)
}
//添加就诊人的对话框
let addVisitorDialogVisible = ref<boolean>(false)
//就诊人的信息的映射类
let visitorInfo = ref<VisitorInfo>({
  id:'',
  name: '',
  certificatesType: '10',
  certificatesNo:'',
  sex:0,
  birthdate:'',
  phone:'',
  isMarry:0,
  isInsure:0,
  addressSelected:[],
  address:'',
  contactsName:'',
  contactsCertificatesType:'',
  contactsCertificatesNo:'',
  contactsPhone:''
})
const $router = useRouter()
/**
 * 添加就诊人弹窗显示
 */
function addVisitor(){
  // addVisitorDialogVisible.value=true
  $router.push({
    path:'/user/patient',
    query:{
      type:'add'
    }
  })
}
/**
 * 添加就诊人
 */
async function addOneVisitorInfo(){
  // console.log(visitorInfo.value)
  let res:AddVisitorInfoResData = await reqAddVisitorInfo(visitorInfo.value)
  // console.log(res)
  if(res.code==200){ElMessage({type:'success', message:'成功'})}
}
// 存储就诊人信息的索引值
let currentIndex = ref<number>(-1)
/**
 * 将就诊人的索引赋值给一个变量
 * @param index
 */
function selectOneVisitor(index:number){
  currentIndex.value=index
}
/**
 * 跳转到就诊人的页面
 */
async function goUser(){
  let hoscode = visitorOfDocInfo.value.hoscode
  let  scheduleId =visitorOfDocInfo.value.id
  let  patientId =visitorInfoArr.value[currentIndex.value].id
  // console.log(hoscode,scheduleId,patientId)
  let res:SubmitOrder = await reqSubmitOrder(hoscode,scheduleId,patientId)
  if(res.code==200){
    await $router.push({
      path:'/user/order',
      query:{
        orderId:res.data
      }
    })
  }else {
    ElMessage({type:'error',message:'获取订单id失败'})
  }
}
</script>
<template>
<div class="step2">
  <h1 class="tit">确认挂号信息</h1>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button type="primary" :icon="User" @click="addVisitor">添加就诊人</el-button>
        </div>
      </template>
      <div class="visitors">
        <Visitor v-for="(visitor,index) in visitorInfoArr" v-bind:visitor="visitor" v-bind:key="visitor.id" @click="selectOneVisitor(index)" :index="index" :currentIndex="currentIndex"/>
      </div>
    </el-card>
    <el-card class="box-card1">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <div class="visitors">
        <el-descriptions
        class="margin-top"
        :column="2"
        border
        >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊日期：
            </div>
          </template>
          {{visitorOfDocInfo?.workDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊医院：
            </div>
          </template>
          {{visitorOfDocInfo.param?.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                就诊科室：
              </div>
            </template>
            {{visitorOfDocInfo.param?.depname}}
          </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医生姓名：
              </div>
            </template>
            {{visitorOfDocInfo?.docname}}
          </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医生职称：
              </div>
            </template>
            {{visitorOfDocInfo?.title}}
          </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医生专长：
              </div>
            </template>
            {{visitorOfDocInfo?.skill}}
          </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医事服务费：
              </div>
            </template>
            {{visitorOfDocInfo?.amount }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <div class="btn">
      <el-button type="primary" size="large" style="width: 300px;" :disabled="currentIndex==-1" @click="goUser">
        确认挂号
      </el-button>
    </div>
  </div>
  <el-dialog v-model="addVisitorDialogVisible" title="添加就诊人" width="30%" draggable>
    <div>
      <el-form
          ref="formRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="姓名：">
          <el-input type="text" autocomplete="off" v-model="visitorInfo.name"/>
        </el-form-item>
        <el-form-item label="证件类型：">
          <el-input type="text" autocomplete="off" v-model="visitorInfo.certificatesType"/>
        </el-form-item>
        <el-form-item label="证件号码：">
          <el-input type="text" autocomplete="off" v-model="visitorInfo.certificatesNo"/>
        </el-form-item>
        <el-form-item label="用户性别：">
          <el-radio-group v-model="visitorInfo.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期：">
          <el-date-picker
              v-model="visitorInfo.birthdate"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input type="text" autocomplete="off" v-model="visitorInfo.phone"/>
        </el-form-item>
        <el-form-item label="婚姻状况：">
          <el-radio-group v-model="visitorInfo.isMarry">
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付费类型：">
          <el-radio-group v-model="visitorInfo.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址：">
          <el-input type="textarea" autocomplete="off" v-model="visitorInfo.addressSelected"/>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input type="textarea" autocomplete="off" v-model="visitorInfo.address"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOneVisitorInfo">提交</el-button>
          <el-button >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisitorDialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<style scoped lang="scss">
.step2{
  padding: 50px 30px;
  .tit{
    font-size: 26px;
    color: #7f7f7f;
    font-weight: 600;
    margin-bottom: 30px;
  }
  .box-card{
    margin-bottom: 20px;
    .card-header{
      span{
        line-height: 32px;
      }
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .visitors{
      display: flex;
      flex-wrap: wrap;
    }
  }
  .btn{
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
}
</style>